import React, { useState, useRef, useEffect } from 'react';
import { Button } from 'antd';

const getListApi = (params: any) => {
  return new Promise((resolve) => {
    console.log(params, 'params');
    setTimeout(() => {
      if (params.pageSize === 10) {
        resolve([1, 2, 3]);
      } else {
        resolve([1, 2, 3, 4, 5]);
      }
    }, 500);
  });
};

export default function State() {
  const [pageSize, setNumber] = useState(10);
  const numRef = useRef(10);

  const getList = React.useCallback(async () => {
    // 闭包问题
    // const result = await getListApi({ pageSize });
    const result = await getListApi({ pageSize: numRef.current });
    console.log(result);
  }, []);

  useEffect(() => {
    getList();
  }, [getList]);

  const handleClick = () => {
    setNumber(pageSize + 10);
    numRef.current = numRef.current + 10;
    getList();
  };

  return (
    <>
      <div>useState: {pageSize}</div>
      <div>useRef: {numRef.current}</div>
      <Button type="primary" onClick={handleClick}>
        +
      </Button>
    </>
  );
}
